<template>
	<!-- 幕帘弹窗 -->
	<uv-overlay :show="show" @click="handleClose">
		<view class="curtain-container" @tap.stop>
			<view class="curtain-content">

				<!-- 背景图片 -->
				<image class="curtain-image" :src="imageUrl" :style="{ width: width + 'rpx', height: height + 'rpx' }"
					mode="aspectFill" @error="handleImageError" />

				<!-- 子组件内容（绝对定位覆盖图片） -->
				<view class="content-wrapper">
					<slot name="content">

					</slot>
					<view class="confirm-btn" :style="{background : btnBgColor}" @click="confirm">
						{{btnName}}
					</view>
					<slot name="discrib"></slot>
				</view>

				<!-- 关闭按钮 -->
				<view class="close-btn" @click="handleClose" v-if="showClose">
					<image src="https://static.tianwandailian.cn/static/server/newimage/register/close-icon.png" mode="" class="close-img"></image>
				</view>

			</view>
		</view>
	</uv-overlay>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const props = defineProps({
		// 是否显示幕帘
		show: {
			type: Boolean,
			default: false
		},
		// 背景图片URL
		imageUrl: {
			type: String,
			required: true
		},
		// 图片宽度（单位rpx）
		width: {
			type: [Number, String],
			default: 580
		},
		// 图片高度（单位rpx）
		height: {
			type: [Number, String],
			default: 580
		},
		// 是否显示关闭按钮
		showClose: {
			type: Boolean,
			default: true
		},
		// 点击遮罩是否可关闭
		maskClosable: {
			type: Boolean,
			default: true
		},
		btnName: {
			type: String,
			default: '立即注册'
		},
		btnBgColor: {
			type: String,
			default: 'linear-gradient(90deg, #FF2C69, #FF1D1F, #FF7132)'
		},
	})

	const emit = defineEmits(['update:show', 'close', 'error', 'confirm'])

	// 关闭幕帘
	const handleClose = () => {
		if (!props.maskClosable && !props.showClose) return
		emit('update:show', false)
		emit('close')
	}

	// 图片加载错误处理
	const handleImageError = (e) => {
		emit('error', e)
	}
	// 点击按钮
	const confirm = () => {
		emit('confirm')
	}
	defineExpose({
		handleClose
	})
</script>

<style scoped lang="scss">
	.curtain-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		position: relative;

		.curtain-content {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.content-wrapper {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
				display: flex;
				flex-direction: column;
				align-items: center;

				.confirm-btn {
					width: 450rpx;
					height: 100rpx;
					border-radius: 50rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}

			.curtain-image {
				position: relative;
				z-index: 1;
			}

			.close-btn {
				position: absolute;
				bottom: -100rpx;
				border-radius: 50%;

				.close-img {
					width: 60rpx;
					height: 60rpx;
					background-size: contain;
				}
			}
		}
	}
</style>